<template>
  <div class="List Detail" :style="{width:$store.state.screenWidth+'px'}">
    <el-row :gutter="30" >
      <el-col :span="15">
       <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="typeName">返回列表页</el-breadcrumb-item>
    <el-breadcrumb-item >{{listName}} </el-breadcrumb-item >

      </el-breadcrumb>
    <b>{{listName}}</b>
      </div>
    </template>
   <h3 v-text="obj.title" style="text-align: center;"></h3>
   <p v-text="obj.date" style="text-align: center;"></p>
    <p v-html="obj.content" class="img"></p>
  </el-card>
      </el-col>
      <el-col :span="9" class="bar">
    <BarVue></BarVue>
    </el-col>
    </el-row>
  </div>
</template>
<script>
import BarVue from '@/components/Bar.vue';


export default{
    name: "detailCom",
    data() {
        return {
       
            
            obj:{},
            typeName: "",
            listName:''
        };
    },
    components:{
        BarVue
    },
  
    mounted() {
        const id=this.$route.params.id;
        const newType=this.$route.params.newType;
       
             switch (newType) {
            case "headlines": 
                this.listName = "头条关注";
              this.typeName='/list/headlines'
              break;
            case "comprehensive":
               this.listName = "综合新闻";
              this.typeName='/list/comprehensive'
              break;
            case "learning":
                this.listName = "学术动态";
              this.typeName='/list/learning'
              break;
            case "story":
                this.listName = "师大故事";
              this.typeName='/list/story'
              break;
            case "newest": 
                this.listName = "最新新闻";
              this.typeName='/list/newest'
              break;
            case "newhot":
              this.listName = "最热新闻";
              this.typeName='/list/newhot'
              break;
                
             }
        const params={id,tableName:'News'}
             this.$axios.get("getDetail", { params }).then((rs) => {
                 const d=new Date(rs.updatedAt);
                 const date=d.getFullYear()+'年'+(d.getMonth()+1)+'月'+ d.getDate()+'日';

                 this.obj={id:rs.id,date,title:rs.title,content:rs.content}
            
   });

   
    },
  
   
   
}


</script>
<style scoped lang="less">
.List{
  
 
        
   margin:170px  auto 100px;
  .el-row{
   .el-col{
    .el-card{
  
  
      .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
    
    
    
  
}
    }
   }
  }
}
</style>

